import React, {Component} from 'react';
import {Dimensions, ImageBackground, RefreshControl, ScrollView, StyleSheet, Text, View} from 'react-native';
import Swiper from 'react-native-swiper';

let imgSize = 9 / 16;   /* 轮播图的图片的大小(3:4或者9:16) */

// 一些常量设置
const cols = 3; // 列数
const left = 10; // 左右边距
const top = 10; // 上下边距
const ImageWH = (Config.deviceWidth - (cols + 1) * left) / cols; // 图片大小

let pic1 = 'http://pic1.nipic.com/2008-08-14/2008814183939909_2.jpg';
let pic2 = 'http://pic15.nipic.com/20110628/1369025_192645024000_2.jpg';
let pic3 = 'http://pic1.win4000.com/wallpaper/9/5450ae2fdef8a.jpg';

export default class Banner_Main extends Component {

    constructor(props) {
        super(props);
        //外框样式，包括titleBar高度
        this.containerStyle = props.hasOwnProperty('containerStyle') ? this.props.containerStyle : styles.container;
        this.state = {
            refreshing: false,
        };
    }

    _onRefresh = () => {
        this.setState({
            refreshing: true
        });

        setTimeout(() => {
                this.setState({
                    refreshing: false
                });
            }, 3000
        );
    };

    render() {
        return (
            <View style={styles.wrapper}>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            //onRefresh={this._onRefresh}
                        />
                    }
                >
                    <View style={[this.containerStyle]}>
                        <Swiper
                            style={{backgroundColor: '#c8c8c8'}}
                            showsButtons={false}          //显示左右两侧的切换按钮
                            removeClippedSubviews={false} //这个很主要啊，解决白屏问题
                            autoplay={true}               //自动播放
                            autoplayTimeout={2}           //自动播放间隔时长
                            horizontal={true}             //水平
                            paginationStyle={styles.paginationStyle}
                            dotStyle={styles.dotStyle}
                            activeDotStyle={styles.activeDotStyle}
                        >
                            <View style={styles.slide1}>
                                <ImageBackground
                                    source={{uri: pic1}}
                                    style={{
                                        height: '100%',
                                        width: '100%',
                                        justifyContent: 'flex-end',
                                        resizeMode: 'scale'
                                    }}>
                                    <Text style={styles.text}>Item 1</Text>
                                </ImageBackground>

                            </View>
                            <View style={styles.slide2}>
                                <ImageBackground
                                    source={{uri: pic2}}
                                    style={{
                                        height: '100%',
                                        width: '100%',
                                        justifyContent: 'flex-end',
                                        resizeMode: 'scale'
                                    }}>
                                    <Text style={styles.text}>Item 2</Text>
                                </ImageBackground>

                            </View>
                            <View style={styles.slide3}>
                                <ImageBackground
                                    source={{uri: pic3}}
                                    style={{
                                        height: '100%',
                                        width: '100%',
                                        justifyContent: 'flex-end',
                                        resizeMode: 'scale'
                                    }}>
                                    <Text style={styles.text}>Item 3</Text>
                                </ImageBackground>
                            </View>
                        </Swiper>
                    </View>
                </ScrollView>

            </View>

        );
    }
}

let styles = StyleSheet.create({
    container:{
        width: Config.deviceWidth,
        height: Config.deviceWidth * imgSize,
    },
    wrapper: {
        flex: 1,
        flexDirection: 'column'
    },
    slide1: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 15,
        fontWeight: 'bold',
        alignSelf: 'center',
        marginBottom: 5,
    },
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    bannerImg: {
        width: '100%',
        height: '99%'
    },

    gridView: {
        flex: 1,
    },

    innerViewStyle: {
        width: ImageWH,
        height: ImageWH * 0.8,
        marginLeft: left,
        marginTop: top,
        // 文字内容居中对齐
        alignItems: 'center'
    },

    iconStyle: {
        width: ImageWH,
        height: ImageWH * 0.8,
    },

});